
import {Motion, MotionSheet} from "../module/ModuleMotion";
import {UIRowElementPool} from "../tool/UIPool";
import MotionSheetElement_Generate from "../ui-generate/MotionEditor/MotionSheetElement_generate";

interface BlockInfo { color:mw.LinearColor; position:mw.Vector2; }
const BlockInfoArray:BlockInfo[] = [
    {color:new mw.LinearColor(0,0,1,1),position:new mw.Vector2(0,40)},
    {color:new mw.LinearColor(0,1,1,1),position:new mw.Vector2(0,50)},
    {color:new mw.LinearColor(1,1,0,1),position:new mw.Vector2(0,60)},
    {color:new mw.LinearColor(0.5,0,1,1),position:new mw.Vector2(0,70)},
    {color:new mw.LinearColor(1,0.5,1,1),position:new mw.Vector2(0,80)},
    {color:new mw.LinearColor(1,0,0.5,1),position:new mw.Vector2(0,90)},
    {color:new mw.LinearColor(1,0.7,0.2,1),position:new mw.Vector2(0,100)},
    {color:new mw.LinearColor(0.3,0.7,0.2,1),position:new mw.Vector2(0,110)},
    {color:new mw.LinearColor(0,0.6,0,1),position:new mw.Vector2(0,120)},
    {color:new mw.LinearColor(0.1,0.45,0.68,1),position:new mw.Vector2(0,130)},
    {color:new mw.LinearColor(0.9,0.1,0.68,1),position:new mw.Vector2(0,140)},
    {color:new mw.LinearColor(0.8,0.2,0.48,1),position:new mw.Vector2(0,150)},
    {color:new mw.LinearColor(0.7,0.1,0.38,1),position:new mw.Vector2(0,160)},
    {color:new mw.LinearColor(0.6,0.4,0.18,1),position:new mw.Vector2(0,170)},
    {color:new mw.LinearColor(0.0,0.2,0.28,1),position:new mw.Vector2(0,180)},
    {color:new mw.LinearColor(0.31,0.9,0.28,1),position:new mw.Vector2(0,190)},
    {color:new mw.LinearColor(0.96,0.6,0.18,1),position:new mw.Vector2(0,200)},
    {color:new mw.LinearColor(0.16,0.65,0.38,1),position:new mw.Vector2(0,220)},
    {color:new mw.LinearColor(0.96,0.15,0.68,1),position:new mw.Vector2(0,240)},
    {color:new mw.LinearColor(0.36,0.45,0.08,1),position:new mw.Vector2(0,260)},
    {color:new mw.LinearColor(0.76,0.35,0.18,1),position:new mw.Vector2(0,280)},
    {color:new mw.LinearColor(0.86,0.25,0.28,1),position:new mw.Vector2(0,300)},
]

const ElementSize = new mw.Vector2(30,9)

export class MotionSheetElement extends MotionSheetElement_Generate{
    private elementPool:UIRowElementPool<mw.Button> = new UIRowElementPool<mw.Button>()

    private data:MotionSheet

    private index:number
    private callback:(index:number)=>void
    private caller:any

    onStart(){
        this.elementPool = new UIRowElementPool<mw.Button>()
        this.elementPool.setCreator(()=>{
            let btn = mw.Button.newObject()
            this.item_canvas.addChild(btn)
            btn.size = ElementSize
            return btn
        })
        this.btn_interactive.onPressed.add(this.onSelfClick.bind(this))
    }

    refresh(motionData:Motion,index:number,callback:(index:number)=>void,caller:any){
        this.data = motionData.motionSheets[index]
        this.index = index
        this.callback = callback
        this.caller = caller

        this.elementPool.resetAll()

        if(this.data.anim){
            this.fillElementByDataIndex(0)
        }
        if(this.data.obb){
            this.fillElementByDataIndex(1)
        }
        if(this.data.eff){
            this.fillElementByDataIndex(2)
        }
        if(this.data.sound){
            this.fillElementByDataIndex(3)
        }
        if(this.data.displacement){
            this.fillElementByDataIndex(4)
        }
        if(this.data.camera){
            this.fillElementByDataIndex(5)
        }
        if(this.data.emit){
            this.fillElementByDataIndex(6)
        }
        if(this.data.levitate){
            this.fillElementByDataIndex(7)
        }
        if(this.data.flashRange){
            this.fillElementByDataIndex(8)
        }
        if(this.data.breakingPoint){
            this.fillElementByDataIndex(9)
        }
        if(this.data.cameraTransform){
            this.fillElementByDataIndex(10)
        }
        if(this.data.cameraLerpTransform){
            this.fillElementByDataIndex(11)
        }
        if(this.data.skyBoxColor){
            this.fillElementByDataIndex(12)
        }
        if(this.data.skyBoxResetDuring){
            this.fillElementByDataIndex(13)
        }
        if(this.data.invisibleDuring){
            this.fillElementByDataIndex(14)
        }
        if(this.data.spawnBuffID){
            this.fillElementByDataIndex(15)
        }
        if(this.data.spawnAroundBuff){
            this.fillElementByDataIndex(16)
        }
        if(this.data.slotChange){
            this.fillElementByDataIndex(17)
        }
        if(this.data.countDuring){
            this.fillElementByDataIndex(18)
        }

        this.txt_frame.text = index.toString()

        let breakingPointAtBehind = false
        for (let i = 0; i < index; i++) {
            if(!motionData.motionSheets[i]?.breakingPoint) continue

            this.btn_interactive.setNormalImageColorByHex('#009900FF')
            breakingPointAtBehind = true
            break
        }
        if(!breakingPointAtBehind){
            this.btn_interactive.setNormalImageColorByHex('#ADADADFF')
        }
    }

    setSelected(val:boolean){
        if(val){
            this.selected.visibility = (mw.SlateVisibility.Visible)
            return
        }
        this.selected.visibility = (mw.SlateVisibility.Hidden)
    }

    setFrameDisplay(val:boolean){
        if(val){
            this.frame.visibility = (mw.SlateVisibility.Visible)
            return
        }
        this.frame.visibility = (mw.SlateVisibility.Hidden)
    }

    private fillElementByDataIndex(index:number):mw.Button{
        let item = this.elementPool.get()
        let info = BlockInfoArray[index]
        item.normalImageColor = (info.color)
        item.position = (info.position)
        item.size = ElementSize
        return item
    }

    private onSelfClick(){
        this.callback.call(this.caller,this.index)
    }
}